<template>
	<div id="app">
		<v-header v-bind:seller="seller"></v-header>
		<div class="tab border-1px">
			<div class="tab-item">
				<router-link to="/goods">商品</router-link>
			</div>
			<div class="tab-item">
				<router-link to="/ratings">评论</router-link>
			</div>
			<div class="tab-item">
				<router-link to="/seller">商家</router-link>
			</div>
		</div>
		<!--keep-alive缓存不活动的组件-->
		<keep-alive>
			<router-view v-bind:seller="seller"></router-view>
		</keep-alive>
	</div>
</template>

<script type="text/ecmascript-6">
	import { urlParse } from './common/js/util.js';
	import header from './components/header/header.vue';

	const ERR_OK = 0;

	export default {
		data() {
			return {
				seller: {
					id: (() => {
						let queryParam = urlParse();
						return queryParam.id;
					})()
				}
			};
		},
		created() {
			this.$http.get('/api/seller').then((response) => {
				response = response.body;
				if(response.errno === ERR_OK) {
					this.seller = Object.assign({}, this.seller, response.datar);
				}
			});
		},
		components: {
			'v-header': header
		}
	};
</script>

<style lang="less">
	@import './common/less/z.less';
	@import './common/less/css3.less';
	.tab {
		display: flex;
		width: 100%;
		.l-h(40px);
		border-bottom: 1px solid rgba(77, 21, 77, 0.1);
		.tab-item {
			flex: 1;
			.tc();
			>a {
				.d-b();
				.tn();
				.font-s14();
				color: rgb(77, 85, 93);
			}
			>a.active {
				color: orangered;
			}
		}
	}
</style>